<template>
  <div class="postLeftContent">
      <div class="tabs">
          <div class="tab"
          v-for="(item,index) in tabs"
          :key="index"
          @mouseenter="checkTab(index)">
            <p>
                <span v-html="item.html"></span>
                {{ item.detail }}
            </p>
              <svg xmlns="http://www.w3.org/2000/svg" width="260" height="50">
                  <line x1="0" x2="260" y1="0" y2="0" class="top"/>
                  <line x1="0" x2="260" y1="50" y2="50" class="bottom"></line>
                  <line x1="0" x2="0" y1="0" y2="50" class="left"></line>
                  <line x1="260" x2="260" y1="0" y2="50" class="right"></line>
              </svg>
          </div>
          <div class="bottomBar"></div>
          <div class="clearfix"></div>
          <div class="overflowContent">
            <div class="tabContent"
            ref="tabContent">
                <div v-for="(item,index) in content"
                :key="index">
                    <div class="tabDetail"
                    v-for="(item,key) in content[index].tag"
                    :key="key"
                    @click="checkCityPost(item.address)">
                            <span style="color: #e02b2b">{{ item.address }}</span> : {{ item.details }}
                    </div>
                </div>
            </div>
          </div>
          <div class="sanjiaoContent" ref="sanjiao">
              <img src="../../static/sanjiao.png">
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tabs: [
                {
                    detail: '热门',
                    index: 0,
                    html: '<span class="iconfont iconremen" style="color: #f02d63"></span>'
                },
                {
                    detail: '推荐',
                    index: 1,
                    html: '<span class="iconfont icontuijian" style="color: #f4ea2a"></span>'
                },
                {
                    detail: '海岛',
                    index: 2,
                    html: '<span class="iconfont iconhaidao_" style="color: #10d610"></span>'
                },
                {
                    detail: '主题',
                    index: 3,
                    html: '<span class="iconfont iconhuabanzhuti" style="color: #1296db"></span>'
                }
            ],
            pointArr: [
                0,
                -110,
                -220,
                -330
            ],
            content:[
                {
                    tag:[
                        {
                            address: '北京',
                            details: '世界著名古都和现代化国际城市'
                        },
                        {
                            address: '广州',
                            details: '粤港澳大湾区，泛珠江三角洲经济区'
                        },
                        {
                            address: '成都',
                            details: '国家历史文化名城'
                        },
                        {
                            address: '上海',
                            details: '长江入海口，东隔东中国海'
                        }
                    ]
                },
                {
                    tag:[
                        {
                            address: '青岛',
                            details: '滨海度假旅游城市'
                        },
                        {
                            address: '杭州',
                            details: '西湖十景'
                        },
                        {
                            address: '深圳',
                            details: '世界影响力的创新创意之都'
                        },
                        {
                            address: '珠海',
                            details: '浪漫之城，百岛之市'
                        }
                    ]
                },
                {
                    tag:[
                        {
                            address: '秦皇岛',
                            details: '驰名中外的旅游休闲胜地'
                        },
                        {
                            address: '珠海',
                            details: '浪漫之城，百岛之市'
                        },
                        {
                            address: '海口',
                            details: '海滨自然迤逦风光'
                        },
                        {
                            address: '广州',
                            details: '粤港澳大湾区，泛珠江三角洲经济区'
                        },
                    ]
                },
                {
                    tag:[
                        {
                            address: '上海',
                            details: '长江入海口，东隔东中国海'
                        },
                        {
                            address: '西安',
                            details: '中国国际形象最佳城市之一'
                        },
                        {
                            address: '成都',
                            details: '国家历史文化名城'
                        },
                        {
                            address: '北京',
                            details: '世界著名古都和现代化国际城市'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        checkTab(index){
            this.$refs.tabContent.style.top = this.pointArr[index] + 'px';
            this.$refs.sanjiao.classList.add('sanjiaorun');
            this.$refs.sanjiao.addEventListener('animationend',()=>{
                this.$refs.sanjiao.classList.remove('sanjiaorun');
            })
        },
        checkCityPost(cityName){
            this.$emit('checkPost',cityName);
        }
    }
}
</script>

<style scoped lang="less">
    .postLeftContent{
        height: 650px;
        width: 100%;
        background-color: rgb(70, 67, 67);
        text-align: right;
        .tabs{
            padding: 25px 20px 15px 20px;
            .tab{
                letter-spacing: 5px;
                font-weight: 50;
                color: white;
                font-size: 18px;
                height: 50px;
                line-height: 50px;
                width: 100%;
                position: relative;
                padding-bottom: 10px;
                transition: all .8s ease-in-out;
                cursor: pointer;
                p{
                    padding-right: 5px;
                }
                svg{
                    position: absolute;
                    top: 0;
                    left: 0;
                    line{
                        stroke-width: 5;
                        stroke: rgb(70, 67, 67);
                        transition: all .5s ease-in-out;
                    }
                    .top,
                    .bottom{
                        stroke-dasharray: 350 10;
                    }
                }
            }
            .tab:hover{
                color: orange;
            }
            .tab:hover svg line{
                stroke:gray
            }
            .tab:hover svg .left{
                transform: translateY(50px);
            }
            .tab:hover svg .right{
                transform: translateY(-50px);
            }
            .bottomBar{
                height: 3px;
                width: 25%;
                background-color: gray;
                float: right;
                margin-top: 10px;
            }
            .overflowContent{
                overflow: hidden;
                position: relative;
                margin-top: 50px;
                height: 123px;
                .tabContent{
                    position: absolute;
                    font-size: 13px;
                    color: #ccc;
                    cursor: pointer;
                    transition: all .3s ease-in-out;
                    top: 0px;
                    .tabDetail{
                        margin: 10px 0 10px 0;
                    }
                }
            }
            .sanjiaoContent{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 50px;
                margin-left: 15px;
                img{
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }
    @keyframes sanjiao {
        0%{
            top: 0px;
        }
        50%{
            top: 15px;
        }
        100%{
            top: 0px;
        }
    }
    .sanjiaorun{
        animation: sanjiao .5s;
        animation-direction: normal;
    }
    .clearfix::after,
    .clearfix::before{
        display: block;
        content: '.';
        width: 0;
        height: 0;
        clear: both;
        visibility: hidden;
        *zoom: 1;
    }
</style>